<template>
	<view class="c-container" style="margin-bottom: 20px;padding-bottom: 20px;box-sizing: border;">
		<view class="tab-control">
			<view class="tab-control-item" :class="{active: currentIndex == 0}" @click="tabClick('base')">
				<text>利润</text>
			</view>
		</view>
		<view  @change="swiperChange" :current="swiperCurrent">
			<view @touchmove.stop>
				<view class="swiper-item">
					<baseInfo  :profit="profit" class="profitBaseInfo" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import baseInfo from './detail/base.vue';
export default {
     components: {
			baseInfo,
		},
		props:{
			profit:{
				type: Object,
				default(){
					return {}
				}
			},
		},
    data(){
        return{
          currentIndex: 0,
          swiperCurrent: 0,
          swiperHeight: 0, // 滑动区域高度
        }
    },
    methods:{
        tabClick(type) {
            switch (type) {
                case 'base':
                    this.currentIndex = 0;
                    this.swiperCurrent = 0;
                    break;
            }
        },
        swiperChange(e) {
            let index = e.detail.current
            this.currentIndex = index;
        },
        // 动态获取高度
			// getSwiperHeight(){
			// 	let height = []
			// 	let query1 = uni.createSelectorQuery().select('.profitBaseInfo');
			// 	query1.boundingClientRect(function(data){
			// 		height.push(data.height)
			// 	}).exec()
				
			// 	let swiperHeight = height[0];
			// 	for(let i = 1; i<height.length; i++){
			// 		if(height[i] > swiperHeight){
			// 			swiperHeight = height[i]
			// 		}
			// 	}
			// 	this.swiperHeight = swiperHeight
			// }

    }
}
</script>
<style lang="less">
	.tab-control {
		display: flex;
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background-color: #fff;

		.tab-control-item {
			flex: 0 25%;
		}

		.tab-control-item text {
			padding: 5px;
		}

		.active {
			color: #007AFF;
		}

		.active text {
			border-bottom: 3px solid #007AFF;
		}

	}
</style>